1 files changed, 56 insertions, 0 deletions
diff --git a/src/app/anime/[id]/[animeId]/page.jsx b/src/app/anime/[id]/[animeId]/page.jsx
new file mode 100644
index 0000000..d59b0a0
--- /dev/null
+++ b/src/app/anime/[id]/[animeId]/page.jsx
@@ -0,0 +1,56 @@
+import { MediaPlayer, MediaProvider } from "@vidstack/react";
+import "@vidstack/react/player/styles/base.css";
+import "@vidstack/react/player/styles/plyr/theme.css";
+import {
+	PlyrLayout,
+	plyrLayoutIcons,
+} from "@vidstack/react/player/layouts/plyr";
+import "./video.css";
+import { redirect } from "next/navigation";
+
+export default async function Video({ params }) {
+	const id = params.animeId;
+
+	// Getting the episode number and the anime name. Kindly ignore!
+	const words = id.split("-");
+	const last_two = words.slice(-2).join(" ");
+	const remainingWords = words.slice(0, -2).join(" ");
+
+	const data = await getVideoLink(id);
+
+	if (data.message) {
+		redirect("/404");
+	}
+
+	const link = data.sources[4].url;
+
+	return (
+		<div>
+			<div className="video2">
+				<p>
+					{last_two} - {remainingWords}
+				</p>
+				<MediaPlayer
+					title={words}
+					src={link}
+					className="testPlayer"
+					playsInline
+					aspectRatio="16/9"
+					load="eager"
+				>
+					<MediaProvider />
+					<PlyrLayout icons={plyrLayoutIcons} />
+				</MediaPlayer>
+			</div>
+		</div>
+	);
+}
+
+async function getVideoLink(id) {
+	const res = await fetch(
+		"https://consumet-api-di2e.onrender.com/anime/gogoanime/watch/" + id,
+		{ next: { revalidate: 3600 } } // Video links are revalidated after an hour
+	);
+	const data = res.json();
+	return data;
+}